<template>
	<iv-row class-name="content-item" justify="space-around" align="middle" :gutter="20">
		<iv-col class-name="content-item-img" :xs="0" :sm="0" :md="imgSpan" :lg="imgSpan">
			<router-link :to="'/' + data.type + '/' + data.id" target="_blank"><img :src="data.cover || this.v_system_image" /></router-link>
		</iv-col>
		<iv-col class-name="content-item-text" :xs="24" :sm="24" :md="textSpan" :lg="textSpan">
			<router-link class="content-item-text_blog" :to="'/' + data.type + '/' + data.id" target="_blank">
				<div class="content-item-text_blog-top">
					<p class="content-item-text_blog-top_title">{{ data.title }}</p>
					<div v-if="data.labels && data.labels.length > 0" class="content-item-text_blog-top_tag">
						<iv-tag v-for="(item, _index) in data.labels" v-if="_index <= 2" :key="item.id" :color="item.id | mapTagColor">{{ item.name }}</iv-tag>
					</div>
				</div>
				<p class="content-item-text_blog-content">{{ data.description | filterHtml }}</p>
			</router-link>
			<div class="content-item-text_operation">
				<span class="content-item-text_operation-time">{{ data.createTime | socialDate }}</span>
				<span class="content-item-text_operation-author">{{ data.author }}</span>
				<span class="content-item-text_operation-like">
					<a :class="{ 'content-item-text_operation-ceil': isCeilingHandler(data.likeNum) }" @click="likeHandler()">
						<iv-icon type="ios-heart-outline"></iv-icon>
						{{ digitalCeilingHandler(data.likeNum) }}
					</a>
				</span>
				<span class="content-item-text_operation-read">
					<a :class="{ 'content-item-text_operation-ceil': isCeilingHandler(data.readNum) }">
						<iv-icon type="ios-eye-outline"></iv-icon>
						{{ digitalCeilingHandler(data.readNum) }}
					</a>
				</span>
			</div>
		</iv-col>
	</iv-row>
</template>

<script>
export default {
	props: {
		data: {
			type: Object,
			default: () => [
				{
					id: {
						type: Number,
						default: 0
					},
					type: {
						type: String,
						default: 'article'
					},
					title: {
						type: String,
						default: '标题'
					},
					cover: {
						type: String,
						default: '封面'
					},
					labels: {
						type: Array,
						default: () => [
							{
								id: {
									type: Number,
									default: 0
								},
								name: {
									type: String,
									default: '标签名称'
								}
							}
						]
					},
					createTime: {
						type: Date,
						default: '1975-04-08 21:10:35'
					},
					description: {
						type: String,
						default: '备注'
					},
					author: {
						type: String,
						default: '作者'
					},
					likeNum: {
						type: Number,
						default: 0
					},
					readNum: {
						type: Number,
						default: 0
					}
				}
			]
		},
		// 数字上限
		overflow_count: {
			type: Number,
			default: 10000
		}
	},
	data() {
		return {
			TYPE_BIG_IMAGE: 1,
			TYPE_NO_IMAGE: 2
		};
	},
	created() {},
	computed: {
		imgSpan: function() {
			switch (this.data.coverType) {
				case this.TYPE_BIG_IMAGE:
					return 7;
				case this.TYPE_NO_IMAGE:
					return 0;
				default:
					return 7;
			}
		},
		textSpan: function() {
			switch (this.data.coverType) {
				case this.TYPE_BIG_IMAGE:
					return 17;
				case this.TYPE_NO_IMAGE:
					return 24;
				default:
					return 17;
			}
		}
	},
	methods: {
		// 是否到达限值
		isCeilingHandler(num = 0) {
			return num >= this.overflow_count;
		},
		// 计算数字上限值
		digitalCeilingHandler(num = 0) {
			if (num <= this.overflow_count) {
				return num;
			}

			return this.overflow_count + '+';
		},
		likeHandler() {
			let data = {
				'id': this.data.id,
				'type': this.data.type
			}
			this.$api.like.add(data).then(res => {
				this.data.likeNum = res.data.number
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.content-item {
	padding: 10px 0;
	&:hover {
		background-color: $default-body-background-color;
		box-shadow: 2px 2px 3px $color-border;
	}

	&-img {
		> a {
			position: relative;
			width: 100%;
			height: 150px;
			display: inline-block;
			overflow: hidden;
			background: #f5f6f7;
			background-size: cover;
			background-position: 50%;
			border: 1px solid $default-border-color;
			border-radius: 2px;

			> img {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100%;
				height: auto;
				transform: translate(-50%, -50%);
			}
		}
	}

	&-text {
		overflow: hidden;

		&_blog {
			&:hover {
				&-top_title {
					color: $default-title-hover-color;
				}
			}

			&-top {
				display: block;
				margin-bottom: 10px;
				height: 25px;

				&_title {
					float: left;
					width: 80%;
					height: 25px;
					text-align: justify;
					color: $default-title-color;
					font-size: 18px;
					font-weight: 700;
					line-height: 25px;
					overflow: hidden;
					word-break: keep-all;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				&_tag {
					display: inline-block;
					float: right;
					width: 20%;
					height: 20px;
					text-align: right;
					margin-left: 10px;
					margin-top: -20px;
					overflow: hidden;

					> div {
						padding: 3px;
						height: 15px;
						line-height: 10px;

						> span {
							font-size: 10px;
							padding-left: 2px;
						}
					}
				}
			}
			&-content {
				display: -webkit-box;
				color: $color-secondary-info;
				font-size: 13px;
				line-height: 20px;
				min-height: 80px;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				word-break: break-all;
				margin-top: 10px;
			}
		}
		&_operation {
			margin-top: 5px;

			span {
				cursor: pointer;
				font-size: 13px;
				line-height: 18px;
				font-weight: 100;
				color: $color-secondary-info;
				+ span {
					float: right;
					margin-left: 10px;
				}
			}
			a {
				cursor: pointer;
				display: inline-block;
				color: $default-link-color;
				user-select: none;
				&:hover {
					color: $color-main-primary;
				}
			}
			&-ceil {
				color: $color-secondary-danger !important;
			}
			&-like {
			}
		}
	}
}
</style>
